<template>
  <div class="main-stock" :class="page + 'Page'">
    <div class="myChart" ref="box"></div>
    <div class="time-label">
      <span v-if="mainStock">{{mainStock.timeData1[0]}}</span>
      <span v-if='page === "index"'>{{mainStock.stockName}}</span>
      <span v-if="mainStock">{{mainStock.timeData1[mainStock.timeData1.length-1]}}</span>
    </div>
    <div class="guess-note" :class="{'hideNote':showGuess}">
      <div class="button" @click.stop.prevent="guess">立即智能模拟</div>
      <div class="risk-note" :class="{'show-guess':showGuess}">模拟结果不作为任何投资意见</div>
    </div>
  </div>
</template>

<script>
  import RemoteDAO from '@/common/RemoteDAO'
  import CommonUtil from '@/common/common.util'
  import Constant from '@/common/constant'
  import echarts from 'echarts/lib/echarts'
  // 引入K线图
  import 'echarts/lib/chart/candlestick'
  import 'echarts/lib/chart/line'

  const TDAPP = window.TDAPP

  const stockWeidian = require('@/assets/images/stock_weidian.png')
  const indexWeidian = require('@/assets/images/index_weidian.png')

  export default {
    name: 'MainStock',
    data () {
      return {
        showGuess: false,
        isLogin: false,
        myChart: {}
      }
    },
    props: {
      mainStock: {
        type: Object
      },
      guessed: {
        type: Boolean
      },
      stock: {
        type: String
      },
      isShare: {
        type: Boolean
      },
      page: {
        type: String
      }
    },
    watch: {
      'mainStock' () {
        if (this.mainStock) {
          this.myChart.setOption(this.extendOption())
        } else {
          this.myChart.clear()
          this.showGuess = false
        }
      },
      'guessed' () {
        if (this.guessed && this.showGuess) {
          this.myChart.clear()
          this.myChart.setOption(CommonUtil.extendObject(this.extendOption(), {series: [{animation: false}]}))
        }
      }
    },
    mounted () {
      this.myChart = echarts.init(this.$refs.box)
      if (this.mainStock) {
        this.myChart.setOption(this.extendOption())
      }
    },
    beforeDestroy () {
      this.myChart.dispose()
    },
    methods: {
      showTrend () {
        this.showGuess = true
        if (this.guessed) {
          this.myChart.clear()
          this.myChart.setOption(CommonUtil.extendObject(this.extendOption(), {series: [{animation: false}]}))
        }
      },
      guess () {
        // 埋点
        let tdId = ''
        if (this.isShare) {
          tdId = '004022'
        } else {
          tdId = '004008'
        }
        TDAPP.onEvent(tdId, '', {userCode: '', stockCode: this.stock})
        TDAPP.send()

        // 若是分享状态则不显示并提示
        if (this.isShare) {
          this.$store.dispatch('setTip', {text: '下载君弘查看模拟走势吧！'})
          return
        }

        // 验证登录、显示模拟走势
        if (Number(this.$route.query.getmobile) === 1 || this.$store.state.getmobile === 1 || Number(CommonUtil.getUrlParam('getmobile')) === 1) {
          this.showTrend()
        } else {
          RemoteDAO.callNativeLogin().then(res => {
            this.$store.dispatch('setGetmobile', 1)
            this.showTrend()
          }, error => {
            this.$store.dispatch('setTip', {text: error.message})
          }).catch(e => {
            console.error(e)
          })
        }
      },
      extendOption () {
        let max = this.mainStock.max
        let min = this.mainStock.min
        let lineColor = '#bac9d8'
        let weidian = stockWeidian
        if (this.page === 'index') {
          lineColor = '#699bcd'
          weidian = indexWeidian
        }
        let option = CommonUtil.extendObject(Constant.chartOption, {
          xAxis: [
            {
              show: false,
              data: this.mainStock.timeData1
            },
            {
              show: false,
              data: this.mainStock.timeData2,
              boundaryGap: false
            }
          ],
          yAxis: [
            {
              show: false,
              min: min,
              max: max
            },
            {
              show: false,
              min: min,
              max: max
            }
          ],
          series: [
            {data: this.mainStock.kData},
            {
              data: this.mainStock.lineData,
              symbol: 'image://' + weidian,
              symbolSize: '13',
              lineStyle: {
                normal: {
                  color: lineColor
                }
              }
            }
          ]
        })
        console.info(option)
        return option
      }
    }
  }

</script>

<style lang="less" rel="stylesheet/less" scoped>
  .main-stock {
    width: 100%;
    height: 250px;
    background-color: #2e2e46;
    position: relative;
    .myChart {
      width: 100%;
      height: 220px;
    }
    .time-label {
      width: 100%;
      height: 30px;
      padding-right: 50%;
      display: flex;
      justify-content: space-between;
      align-items: center;
      background: #212138;
      span {
        font-size: 20px;
        color: #a2a2c7;
        opacity: 0.6;
      }
      span:first-child {
        margin-left: 30px;
      }
      span:last-child {
        margin-right: 8px;
      }
    }
  }

  .main-stock.stockPage{
    box-shadow: 0 6px 6px 0 #b6b6b6;
  }

  .guess-note {
    width: 50%;
    height: 220px;
    position: absolute;
    top: 0;
    right: 0;
    background-color: #2e3955;
    border: 1px dashed #309fea;
    .button {
      margin: 71px auto 21px;
      width: 205px;
      height: 60px;
      border-radius: 6px;
      background-color: #309fea;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 28px;
      color: #fff;
      opacity: 0.9;
    }
    .risk-note {
      font-size: 24px;
      color: #77c1ff;
      width: 100%;
      text-align: center;
    }
  }

  .hideNote {
    background-color: rgba(0, 0, 0, 0) !important;
    div {
      display: none !important;
    }
  }

  .indexPage {
    background-color: #fff8ec;
    background-image: -webkit-linear-gradient(right,#fff 50%,transparent 0);
    .myChart{
      box-shadow: inset 0 -1px 0 0 rgba(234,234,234,0.5);
    }
    .time-label {
      background: #fff;
      span {
        color: #999999;
        opacity: 1;
      }
    }
    .guess-note {
      background: #eaf5fc;
    }
    .risk-note {
      color: #a0d3fe;
    }
  }
</style>
